<script lang="ts" setup>
import { ref, defineProps } from "vue";
import { ColumnProps } from "@/share/propsType";
import Uploader from "@/components/Uploader.vue";
import message from "@/components/CreateMessage";
import { updateColumn } from "@/api/api";
import { checkAuth } from "@/share/helper";
import Logo from "@/assets/logo.png";
import Arrowdown from "@/assets/arrowdown.svg";
import { useMainStore } from '@/stores/main'

  // 清空bg没写
    const props = defineProps<{
      column: ColumnProps
    }>()
    const store = useMainStore();
    const isFold = ref(true);
    const reUpload = ref(false);
    let auth = false;
    const { _id: columnId } = props.column;

    store.user.isLogin && checkAuth(columnId as string).then((bool) => {
      bool && (auth = bool);
      console.log(bool, "checkAuth");
    });

    function handleUploadFail(err) {
      console.log("handleUploadFail", err);
      message("上传专栏背景图失败，请重新上传", "error");
    }

    function handleUploadOK(data) {
      const { url } = data;
      updateColumn(columnId, { bg: url });
    }

    function handleUpload(e) {
      if (!auth) {
        // 没有权限，阻止点击事件冒泡，不予更改上图图片修改bg
        e.stopPropagation();
      }
    }

    function reuploadBg(e) {
      reUpload.value = true;
    }

</script>
<template>
  <div class="column">
    <!-- 专栏头像部分 -->
    <div class="column-avatar">
      <img
        :src="column.avatar || Logo"
        :alt="column.title"
      />
    </div>
    <!-- 专栏背景部分 -->
    <Uploader
      v-if="reUpload || !column.bg"
      action="/upload"
      @uploadError="handleUploadFail"
      class="upload"
      @uploadSuccess="handleUploadOK"
    >
      <template #default>
        <div @click="handleUpload">
          <div class="column-image" title="点击上传专栏背景图"></div>
        </div>
      </template>

      <template #uploading-success="soltInfo">
        <img
          class="upload-success"
          :src="soltInfo.uploadData.url"
          alt="专栏背景图"
        />
      </template>

      <template #upload-error>
        <div class="column-image" title="点击上传专栏背景图"></div>
      </template>
    </Uploader>
    <div v-else class="upload-img-wrap">
      <img class="upload-success" :src="column.bg" alt="专栏背景图" />
      <!-- <button class="reupload-btn" @click="reuploadBg">重新上传</button> -->
    </div>
    <!-- 专栏信息部分 -->
    <div class="column-info">
      <h4 class="column-tit">{{ column.title }}</h4>

      <div>
        <img
          @click="
            () => {
              isFold = !isFold;
            }
          "
          :class="['arrowdown-svg', { 'turn-up': isFold }]"
          :src="Arrowdown"
          alt=""
        />
        <span class="column-brief">{{ isFold ? "查看" : "收起" }}专栏介绍</span>
      </div>
      <p :class="['column-desc', { 'column-desc-fold': isFold }]">
        {{
          column.description
            ? column.description
            : "栏主很懒, 什么都没介绍栏主很懒"
        }}
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.column {
  border-radius: 6px;
  // background-image: linear-gradient(to bottom, #999999 50%, #fff 0%);
  background: peachpuff;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
  position: relative;
  overflow: hidden;
}
.column-image {
  height: 160px;
  background-color: #999;
  cursor: pointer;
}
.upload-success {
  width: 100%;
  height: 160px;
  display: block;
  background-color: #999;
}
.column-avatar {
  position: absolute;
  left: 20px;
  top: 74px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  z-index: 1;
  img {
    width: 100%;
    height: 100%;
  }
}
.upload-img-wrap {
  position: relative;
}
.reupload-btn {
  padding: 8px 10px;
  background-color: #3f85ed;
  color: #fff;
  border: solid 1px #fff;
  border-radius: 4px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.column-info {
  min-height: 120px;
  margin: 0 0 20px 200px;
}
.column-tit {
  font-size: 24px;
  line-height: 24px;
  margin: 12px 0 12px 12px;
}

.column-desc {
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  margin: 10px 20px 0 10px;
  transition: 0.2s all ease-in-out;
  transform: scaleY(1) translateY(0);
}
.column-desc-fold {
  // font-size: 0px;
  height: 0px;
  transform: scaleY(0) translateY(-50%);
  transition: 0.2s all ease-in-out;
}
.arrowdown-svg {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  transition: 0.2s all ease-in-out;
  transform: rotate(0deg);
  margin: -8px;
}
.turn-up {
  transition: 0.2s all ease-in-out;
  transform: rotate(180deg);
}
.column-brief {
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.8);
}
</style>
